<template>
	<view class="wrap yjfk-form-right">
		<!-- <image class="bgs" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/1.png" mode="widthFix"></image> -->
		<view class="tit">
			{{info.title}}  每天可发1次
		</view>
		<view class="code">
			任务编号 {{info.job_code}}
		</view>
		<view class="form">
			<u-form :model="model" :rules="rules" ref="uForm" label-position="top">
				<!-- <u-form-item  :border-bottom="false" label="投诉建议" prop="content">
				<view class="box">
					<u-input type="textarea" placeholder="请填写10字以上的描述以便我们提供更好的帮助"
							v-model="model.content" height="300" maxlength="2000" />
				</view>
			</u-form-item> -->
			<u-form-item :border-bottom="false" label="昵称" prop="nickname">
				<view class="box box1">
					<u-input class="input-left-form" placeholder="请输入您的昵称" v-modtel="model.nickname" type="text"
						maxlength="200"></u-input>
				</view>
			</u-form-item>
			<u-form-item :border-bottom="false" label="小红书号" prop="xhsh">
				<view class="box box1">
					<u-input class="input-left-form" placeholder="请输入小红书号" v-modtel="model.xhsh" type="text"
						maxlength="200"></u-input>
				</view>
			</u-form-item>
			<u-form-item :border-bottom="false" label="发布链接" prop="fblj">
				<view class="box box1">
					<u-input class="input-left-form" placeholder="请输入发布链接" v-modtel="model.fblj" type="text"
						maxlength="200"></u-input>
				</view>
			</u-form-item prop="imgs">
				<u-form-item :border-bottom="false" label="请上传发布成功截图  0/4">
					<u-upload multiple maxCount="4" ref="uUpload" :show-progress="false"
						action="https://hegui.kaisenbaoxian.com/personnelManage/file/uploadImg" :auto-upload="true"
						:file-list="fileList1">
					</u-upload>
				</u-form-item>


			
			</u-form>
			<view class="u-m-t-40">
				<u-button shape="circle" type="primary" @click="submit">确认提交</u-button>
			</view>
		</view>
		
		<!-- 客服 -->
		
		<u-popup border-radius="29" v-model="serviceMask" mode="center">
			<view class="qun">
				<qun />
			</view>
			<image @click="serviceMask=false" class="close" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/33.png" mode=""></image>
		</u-popup>
	</view>
</template>
<script>
	import qun from './compoments/qun.vue'
	export default {
		onPageScroll(e) {
			this.enable = e.scrollTop > 100 ? true : false
		},
		components: {
			qun
		},
		data() {

			return {
				info:null,
				curid:"",
				serviceMask:false,
				enable: false,
				fileList1: [],
				model: {

					xhsh: '',
					nickname: '',
					imgs:''
				},
				rules: {
					nickname: [{
						required: true,
						message: '请输入您的昵称',
						trigger: ['change', 'blur'],
					}],
					xhsh: [{
						required: true,
						message: '请输入小红书号',
						trigger: ['change', 'blur'],
					}],
					fblj: [{
						required: true,
						message: '请输入发布链接',
						trigger: ['change', 'blur'],
					}],
					content: [{
						required: true,
						min: 10,
						max: 500,
						message: '问题和意见在 10 到 2000 个字符之间',
						trigger: ['change', 'blur'],
					}],
				}
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
			// 获取设备信息
			uni.getSystemInfo({
				success: res => {
					this.model.deviceInfo = JSON.stringify(res);
				}
			});
		},
		onLoad(e) {
			this.curid =  e.id
		
			this.$u.api.generateJobTask({
					jobId: e.id,
				})
				.then((res) => {
					this.info  =res.task
				});
		},
		
		methods: {
			submit() {
				// this.serviceMask = true
			
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$u.api.finishJobTask(this.model).then(res => {
							
							
								this.serviceMask = true
							// uni.showModal({
							// 	title: '提示',
							// 	content: res.message,
							// 	showCancel: false,
							// 	success: function() {
							// 		if (res.result == 'true') {
							// 			uni.navigateBack();
							// 		}
							// 	}
							// });
						});
					} else {
						this.$u.toast('您填写的信息有误，请根据提示修正。');
					}
				});
			},
			cancel() {
				uni.navigateBack();
			}
		}
	};
</script>
<style lang="scss" scoped>
	/deep/ .u-mode-center-box{
		background-color: transparent !important;
	}
	.close{
		width: 65rpx;
		height: 65rpx;
		display: block;
		// background: rgba(255,255,255,0.8);
		margin: 46rpx auto;
	}
	.input-placeholder {
		text-align: right;
	}
	.form{
		margin-top: -30rpx;
	}

	.code {
		font-size: 24rpx;
		font-family: PingFang SC-Light, PingFang SC;
		font-weight: 300;
		color: #666666;
		line-height: 28rpx;
		margin-top: 5rpx;
		padding: 0 32rpx;
	}

	.tit {
		padding: 20rpx 32rpx 20rpx 32rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 300;
		font-size: 32rpx;
		color: #333333;
		line-height: 33rpx;
	}

	.box {
		// background: #fff;
		width: 100%;
		padding: 22rpx 31rpx;
		border-radius: 13rpx;
		border: 1rpx solid #efefef;
	}

	.box1 {
		padding: 10rpx 31rpx;
	}
	/deep/ .uni-input-input{
		
	}

	// /deep/ .u-input,/deep/ .u-list-item{
	// 	background: #fff !important;

	// }
</style>
